<template>
	<view>
		<block v-for="(item, index) in StrArray" :key="index">
			<text :style="{fontSize: $xl.calcUnit(fontSize, 'rpx'), color: item === keyword ? highlight:color}">{{ item }}</text>
		</block>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	const props = defineProps({
		// 需要显示的文本
		text: {
			type: String,
		},
		// 需要高亮的关键字
		keyword: {
			type: String,
		},
		// 高亮的颜色
		fontSize: {
			type: [Number, String],
			default: 30
		},
		// 高亮的颜色
		color: {
			type: String,
			default: '#666'
		},
		// 高亮的颜色
		highlight: {
			type: String,
			default: 'red'
		}
	})
	const StrArray = computed(() => 
		props.text.replace(new RegExp(`${ props.keyword }`, 'g'), `%%${ props.keyword }%%`).split('%%')
	)
</script>